<template>
  <el-form
    :model="form"
    status-icon
    :rules="rules"
    ref="form"
    label-width="100px"
    class="login-container"
  >
    <h3 class="login-title">系统登录</h3>
    <el-form-item
        label="用户名"
        label-width="90px"
        prop="username"
        class="username"
        size="small"
    >
        <el-input
            type="input"
            v-model="form.username"
            auto-complete="off"
            placeholder="请输入账号"
        ></el-input>
    </el-form-item>
    <el-form-item
        label="密码"
        label-width="90px"
        prop="password"
        size="small"
    >
        <el-input
            type="password"
            v-model="form.password"
            auto-complete="off"
            placeholder="请输入密码"
        ></el-input>
    </el-form-item>
    <el-form-item class="login-submint" style="margin: 20px 0 0 0;">
        <el-button
            type="primary"
            @click="login"
            class="login-submit"
            size="small"
        >
         登录
        </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { getMenu} from "../api/data"
export default {
    name:'Login',
    data(){
        return {
            form:{

            },
            rules: {
                username:[
                    { require: true, message: '请输入用户名', trigger: "blur" },
                    {
                        min: 3,
                        message: "用户名长度不能小于3位",
                        trigger: "blur"
                    }
                ],
                password: [
                    { require: true, message: '请输入密码', trigger: "blur" },
                ]
            }
        }
    },
    methods:{
        login(){
            getMenu(this.form).then(({ data: res }) => {
                if(res.code === 20000){
                    this.$store.commit('tabs/clearMenu')
                    this.$store.commit('tabs/setMenu', res.data.menu)
                    this.$store.commit('user/setToken', res.data.token)
                    this.$store.commit('tabs/addMenu', this.$router)
                    this.$router.push({name:'home'})
                    this.$store.commit('user/currentUser', { len: res.data.menu, username: this.form.username, date: new Date().toLocaleString()})
                } else {
                    this.$message.warning(res.data.message)
                }
            })
        }
    },

}
</script>

<style lang="less" scoped>
    .login-container{
        width: 300px;
        height: 233px;
        margin: 150px auto;
        background-color: white;
        border: 1px solid #eaeaea;
        border-radius: 8px;
        box-shadow: 0 0 16px #cac6c6;
        overflow: hidden;
        .login-title{
            margin: 20px 0 30px;
            text-align: center;

        }
    }
    .el-form-item{
        margin-bottom: 15px;
    }
    .el-input{
        width: 188px;
    }
</style>